/* 全局容器 */
.container {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-size: 28rpx;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
  padding-top: 330rpx;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background-color: #FFFFFF;
}

/* 顶部 Header - 使用统一的Header组件样式，这里移除冲突样式 */

/* 定位栏 */
.switch-location {
  padding: 30rpx 30rpx;
  background: #FFFFFF;
  border-radius: 0rpx 0rpx 26rpx 26rpx;
  display: flex;
  align-items: center;


}

.switch-location text {

  font-weight: 400;
  font-size: 30rpx;
  color: #0E1C37;
  line-height: 26rpx;
}

/* 广告 Banner */
.banner {
  width: 90%;
  margin: 20rpx auto;
  border-radius: 20rpx;
  overflow: hidden;
}

.banner image {
  width: 100%;
}

/* 功能按钮区 */
.function-container {
  background-color: white;
  //四边圆角
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.function-row {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
}

.function-row:first-child {
  padding-bottom: 0rpx;

}

.function-row:last-child {
  padding-top: 20rpx;
}

.func-item {
  flex: 1;
  position: relative;
  width: 222rpx;
  height: 114rpx;
}

.go-btn {
  position: absolute;
  bottom: -20rpx;
  right: -10rpx;
  background-color: #00C853;
  color: white;
  font-size: 24rpx;
  font-weight: bold;
  padding: 10rpx 20rpx;
  border-radius: 50rpx;
  transform: rotate(15deg);
}

.func-item {
  margin: 0 10rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  box-sizing: border-box;
}

/* 技能学习和AI需求发布模块高度 */

.func-item.yellow {
  height: 208rpx;
  width: 287rpx;
}

.func-item.ai-demand {
  height: 208rpx;
  width: 102%;
  margin: 0;
}

.green {
  background: linear-gradient(90deg, #C2FF85 0%, #E9FEDF 100%);
}

.blue {
  background: linear-gradient(90deg, #85E1FF 0%, #E0FCFF 100%);
}

.red {
  background: linear-gradient(90deg, #FFB4B4 0%, #FFEDE9 100%);
}

.yellow {
  background: linear-gradient(90deg, #FFF5AE 0%, #FFF9D4 100%);
}

.light-green {
  background: #A8F06B;
}

.func-item .func-icon {
  width: 70rpx;
  height: 65rpx;
  margin-bottom: 10rpx;
  position: absolute;
  top: 37rpx;
  left: 144rpx;
}

// 调整技能学习项的图标位置
.func-item.yellow .func-icon {
  position: relative;
  left: -10rpx;
  top: 100rpx;
  width: 120rpx;
  height: 120rpx;
}

/* 功能按钮区字体样式 */

/* 技能学习子文本样式 */
.skill-subtext {
  position: absolute;
  top: 101rpx;
  left: 31rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
}

.skill-subtext text {
  color: black;
}


/* 功能按钮区字体样式 */
/* 订单详情 */
.func-item.green text {
  font-size: 30rpx;
  color: #008526;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 30rpx;
  margin: 10rpx 0;
  position: absolute;
  top: 20rpx;
  left: 29rpx;
}

/* 聊需求 */
.func-item.blue text {
  font-size: 30rpx;
  color: #157EFE;
  font-family: Source Han Sans CN;
  font-weight: 500;
  margin: 10rpx 0;
  position: absolute;
  top: 20rpx;
  left: 29rpx;
}

/* 紧急发布 */
.func-item.red text {
  font-size: 30rpx;
  color: #F03733;
  font-family: Source Han Sans CN;
  font-weight: 500;
  margin: 10rpx 0;
  position: absolute;
  top: 20rpx;
  left: 29rpx;
}

/* 技能学习 */
.func-item.yellow text {
  font-size: 30rpx;
  color: #FF5400;
  font-weight: bold;
  margin: 10rpx 0;
  position: absolute;
  top: 43rpx;
  left: 31rpx;
}

/* 技能学习 */
.func-item.ai-demand text {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 30rpx;
  color: #0E1C37;
  margin: 10rpx 0;
  position: absolute;
  top: 43rpx;
  left: 31rpx;
}

/* AI需求发布 */
.func-item.light-green text:first-child {
  font-size: 30rpx;
  color: #fff;
  font-weight: bold;
  margin: 10rpx 0;
}

.subtext {
  font-size: 26rpx;

  color: #666;
  font-weight: 400;
  line-height: 32rpx;
  margin-top: 6rpx;
}

.go-btn {
  background: #fff;
  border-radius: 30rpx;
  padding: 8rpx 20rpx;
  font-size: 26rpx;
  margin-top: 10rpx;
  color: #A8F06B;
  font-weight: bold;
}

/* 接单大厅 */
.hall-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: linear-gradient(0deg, #F2F3F8 0%, #FFFFFF 56.00000000000001%);
  border-radius: 30rpx 30rpx 0 0;
}

.hall-header text {

  font-weight: bold;
}

.filter-bar {
  display: flex;
  align-items: center;
}

.filter-column {
  width: 130rpx;
  padding-left: 20rpx;
  border-left: 7rpx solid #BEFF32;
  margin-right: 10rpx;
  font-weight: 500;
  font-size: 30rpx;
}

.filter-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: #333;
  margin-left: 10rpx;
  padding: 8rpx 25rpx;
  background: #EEF2F3;
  border-radius: 26rpx;
  transition: all 0.3s ease;
  height: 52rpx;
  box-sizing: border-box;
}

.filter-item.active {
  background-color: #E9FEDD;
}

.filter-text {
  font-weight: 400;
  font-size: 22rpx;
  color: #888B9A;
  line-height: 26rpx;
  transition: color 0.3s ease;
  margin-right: 3rpx;
}

.filter-item.active .filter-text {
  color: #0E1C37;
  font-weight: 500;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  transform: translateX(0);
  min-width: 280rpx;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 16rpx;
  z-index: 999;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  margin-top: 8rpx;

  &::before {
    content: '';
    position: absolute;
    top: -8rpx;
    right: 30rpx;
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-bottom: 8rpx solid #fff;
    filter: drop-shadow(0 -2rpx 2rpx rgba(0, 0, 0, 0.1));
  }
}

/* 筛选组样式 */
.filter-group {
  margin-bottom: 10rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

/* 筛选组标题 */
.filter-group-title {
  font-size: 22rpx;
  color: #888B9A;
  padding: 15rpx 20rpx 0;
  font-weight: 500;
}

/* 筛选选项容器 */
.filter-options {
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
}

/* 筛选选项 */
.filter-options view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  height: 68rpx;
  text-align: left;
  font-size: 24rpx;
  font-weight: 400;
  transition: background-color 0.2s ease;
  line-height: 1;
}

.dropdown-menu view:first-child {
  border-radius: 16rpx 16rpx 0 0;
}

.dropdown-menu view:last-child {
  border-radius: 0 0 16rpx 16rpx;
}

.dropdown-menu view text {
  display: inline-block;
  line-height: 68rpx;
  vertical-align: middle;
}

.dropdown-menu view.active {
  color: #0E1C37;
  background-color: #BEFF32;
  font-weight: 500;
  border-radius: 16rpx;
}

.check-icon {
  width: 18rpx;
  height: 12rpx;
  margin-left: 6rpx;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* 订单列表 */
.job-list {
  padding: 20rpx;
}

.job-item {
  background-color: white;
  border-radius: 26rpx;
  padding: 30rpx 26rpx;
  margin-bottom: 20rpx;
}

.job-info {
  display: flex;
}

.job-icon {
  width: 40rpx;
  height: 39rpx;
  margin-right: 25rpx;
  border-radius: 8rpx;
  object-fit: cover;
}

.job-details {
  flex: 1;
}

.job-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26rpx;
}

.job-title text:first-child {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.salary {
  color: #ff3b30;
  font-size: 32rpx;
  font-weight: bold;
}

.job-requirements {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10rpx;
  margin-bottom: 15rpx;
  position: relative;
  left: -70rpx;
}

.job-requirements text {
  background-color: #EEF2F3;
  padding: 8rpx 15rpx;
  border-radius: 10rpx;
  font-weight: 400;
  font-size: 24rpx;
  color: #888B9A;
  line-height: 1.5;
}

.order-info {
  margin-bottom: 20rpx;
  font-size: 24rpx;
  color: #888B9A;
  position: relative;
  top: 0rpx;
  left: -70rpx;
  width: calc(113%); // 限制宽度防止溢出
}

.info-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10rpx;
  margin-bottom: 26rpx;
  max-width: 100%; // 确保不超出父容器
}

.people-info {
  background: #EEF2F3;
  border-radius: 10rpx;
  padding: 8rpx 12rpx; // 增加内边距，移除固定高度
  font-size: 23rpx;
  line-height: 1.4;
  max-width: 100%; // 限制最大宽度
  color: #888B9A;
  word-break: break-word; // 允许长文本换行
  white-space: normal; // 允许换行
  display: inline-block; // 改为内联块级元素
}


.location-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  left: -70rpx;
}

.location {
  font-size: 23rpx;
  color: #888B9A;
}

.distance {
  font-size: 22rpx;
  color: #888B9A;
}

.apply-btn {
  background-color: #BEFF32;
  color: #0E1C37;
  border: none;
  border-radius: 12rpx;
  padding: 8rpx 0;
  width: 172rpx;
  height: 46rpx;
  font-size: 28rpx;
  font-weight: 500;
  margin-top: 2rpx;
  transition: all 0.3s ease;
  position: relative;
  left: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 56rpx;
  text-align: center;
  cursor: pointer;
  user-select: none;
}

.apply-btn:active {
  transform: scale(0.98);
}

.apply-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.apply-btn.applied {
  background-color: #FFFFFF;
  color: #A3A6B7;
  border: none;
  line-height: 56rpx;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 12rpx;
  border: 1px solid #A3A6B7;  
}

.no-more {
  text-align: center;
  font-size: 26rpx;
  color: #A3A6B7;
  padding: 20rpx 0 40rpx 0;
  /* 增加底部padding，防止被tab栏遮挡 */
}


.no-order-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
  padding: 20rpx;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
  opacity: 0.5;
}

.no-order-text {
  color: #999999;
  font-size: 28rpx;
}


/* 报名成功弹框样式 */
.apply-success-modal {
  position: fixed;
  bottom: 250rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 398rpx;
  height: 86rpx;
  background: #404040;
  border-radius: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.apply-success-modal text {
  font-weight: 500;
  font-size: 28rpx;
  color: #FFFFFF;
}